/*
 *@description:自定义节点组件
 *@Author:@rennan
 *@Date:2024-09-23 17:10:08
 *@version: V1.0.0
*/
<template>
    <div class="box">
        <div class="box_top">
            <img @click="handleClick" class="demo_icon" src="../imgs/img2.png" alt="">
            <input v-if="isClick" type="text" v-model="title">
            <span v-else>{{ title }}</span>
        </div>
        <div class="box_bootom">
            {{ desc }}
        </div>
    </div>
</template>
<script>
export default {
    props: {
        title: {
            type: String,
            default: '节点名称'
        },
        desc: {
            type: String,
            default: '节点描述'
        }
    },
    data() {
        return {
            name: '',
            isClick: false
        };
    },
    methods: {
        handleClick() {
            this.isClick = !this.isClick;
        }
    }

};
</script>
<style scoped>
.box {
    width: 200px;
    height: 80px;
    color: #7f7e7e;
    font-size: 600;
    border: 1px solid #ff4d7c;
    background: rgba(255, 77, 124, 0.15);
    padding: 5px 8px;
}

.box_top {
    width: 100%;
    height: 50%;
    display: flex;
    align-items: center;
}

.box_top .demo_icon {
    width: 25px;
    height: 25px;
    margin-right: 5px;
}

.box_bootom {
    margin-top: 10px;
    font-size: 14px;
    font-size: 400;
}</style>
